<template>
	<view class="content">
		<view class="from-info-box">
			<view class="from-item-box">
				<view class="title-box">
					<text>抬头类型</text>
				</view>
				<view class="customTab">
					<text :class="{ 'active': itype == 1 }" @click="status == 1? false : itype = 1">个人</text>
					<text :class="{ 'active': itype == 2 }" @click="status == 1? false : itype = 2">企业</text>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box">
					<text>抬头名称</text>
				</view>
				<view class="input-box">
					<input type="text" :disabled="status == 1" v-model="formInfo.name" placeholder="请输入发票抬头" placeholder-style="color:#CCC">
				</view>
			</view>
			<view v-show="itype == 2">
				<view class="from-item-box">
					<view class="title-box">
						<text>企业税号</text>
					</view>
					<view class="input-box">
						<input type="text" :disabled="status == 1" v-model="formInfo.duty_number" placeholder="请输入企业税号" placeholder-style="color:#CCC">
					</view>
				</view>
				<view class="from-item-box">
					<view class="title-box">
						<text>开户银行[非必填]</text>
					</view>
					<view class="input-box">
						<input type="text" :disabled="status == 1" v-model="formInfo.bank" placeholder="请输入开户银行" placeholder-style="color:#CCC">
					</view>
				</view>
				<view class="from-item-box">
					<view class="title-box">
						<text>银行账户[非必填]</text>
					</view>
					<view class="input-box">
						<input type="text" :disabled="status == 1" v-model="formInfo.account" placeholder="请输入银行账户" placeholder-style="color:#CCC">
					</view>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box">
					<text>电话[非必填]</text>
				</view>
				<view class="input-box">
					<input type="number" :disabled="status == 1" maxlength="11" v-model="formInfo.phone" placeholder="请输入联系电话" placeholder-style="color:#CCC">
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box">
					<text>邮箱[非必填]</text>
				</view>
				<view class="input-box">
					<input type="text" :disabled="status == 1" v-model="formInfo.email" placeholder="请输入邮箱" placeholder-style="color:#CCC">
				</view>
			</view>
		</view>
		<view class="bottom-plate-box" v-if="status != 1">
			<!-- 底部but -->
			<view class="bottom-but-box" @click="bindSubmit">
				<text>申请开票</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false,
				itype: '1',
				shows:false,
				shopList: [],//门店列表
				citys:[],//城市数据
				cityId:"",//城市id
				shopName:"",//门店名字
				order_id: '',
				formInfo:{ //表单信息
					duty_number:"",
					name:"",
					phone:"",
					bank:"",
					account:"",
					email: '',
				},
				channel: '',
				status: '',
			}
		},
		onReady() {
			// this.getAllCity();
		},
		onLoad(option) {
			const { order_id, status } = option
			this.order_id = order_id || ''
			this.status = status || ''
			this.channel = this.getOpenerEventChannel()
			if (status == 1) {
				this.getInfo()
			}
			// uni.showLoading({title:"加载中"});
			// this.getShopList();
		},
		methods:{
			bindAddImg(){ // 图片上传
				const { img } = this.formInfo
				if (img.length == 9) {
					this.$showToast("最多上传9张");
					return
				}
				this.$uploadPic(9 - img.length, res => {
					this.formInfo.img = [...img, ...res]
				})
			},
			// 图片预览
			bindImgPreview: function (current) {
				const { img: imgList, urls = imgList.map(item => item.path) } = this.formInfo
				uni.previewImage({
					current,
					urls
				})
			},
			// 删除图片
			bindDel: function (index) {
				this.formInfo.img.splice(index, 1)
			},
			bindCode(){// 调起条码扫描
				let _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
					success: function (res) {
						console.log(res)
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						_this.formInfo.number = res.result;
					},
					fail: msg => {
						uni.showToast({
							title: '识别失败,请对准条形码重试',
							icon: 'none'
						})
						console.log(msg)
					}
				});
			},
			bindShowPicker(status){ //showPicker
				status==1 ? this.show = true : this.shows = true;
			},
			onConfirm(e){
				console.log(e);
				this.getShopList(e.id[0]);
				this.formInfo.city = e.name;
				this.show = false;
			},
			shopConfirm(e){
				console.log('得到下标索引：',e[0]);
				this.formInfo.mer_id = this.shopList[e[0]].mer_id;
				this.shopName = this.shopList[e[0]].mer_name;
			},
			bindSubmit(){ //表单提交
				let {duty_number,name,phone,bank,account,email} = this.formInfo;
				if(name==""){
					this.$showToast("请输入发票抬头");
					return
				}
				if(duty_number=="" && this.itype == 2){
					this.$showToast("请输入企业税号");
					return
				}
				const param = {
					duty_number,name,phone,bank,account,email, order_id: this.order_id, type: this.itype
				}
				console.log(param)
				this.$u.api.setInvoicApi(param).then(res=>{
					if(res.code==1){
						uni.showModal({
							title: '提交成功',
							showCancel: false,
							success: rest => {
								this.channel.emit('reload', true)
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			getAllCity(){ //获取省市区
				this.$u.api.getAllCityApi({}).then(res=>{
					if(res.code==1){
						this.citys = res.data;
						console.log(this.citys,'------');
					}
				});
			},
			getInfo(){ //获取门店数据
				const {  order_id } = this
				this.$u.api.invoiceDetailApi({ order_id }).then(res=>{
					if(res.code==1){
						console.log('门店列表：',res.data);
						this.formInfo.name = res.data.name
						this.formInfo.duty_number = res.data.duty_number
						this.formInfo.phone = res.data.phone
						this.formInfo.bank = res.data.bank
						this.formInfo.account = res.data.account
						this.formInfo.email = res.data.email
						this.itype = res.data.type
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	// .upload-img-box{
	// 	.title-box{
	// 		padding-bottom: 30rpx;
	// 		font-size: 30rpx;
	// 		font-weight: bold;
	// 		color: #333333;
	// 	}
	// 	.input-box{
	// 		position: relative;
	// 		width: 100%;
	// 		input{
	// 			font-size: 30rpx;
	// 			font-weight: 400;
	// 			padding: 30rpx;
	// 			border: 1rpx solid #000;
	// 			border-radius: 20rpx;
	// 		}
	// 	}
	// }
	
	// .upload-img-box{
	// 	width: 100%;
	// 	.upload-img-box-item{
	// 		position: relative;
	// 		line-height: 0;
	// 		image{width: 210rpx;height: 210rpx;margin: 0 20rpx 20rpx 0;}
	// 		.del{
	// 			// position: absolute;
	// 			// top: 0;
	// 			// right: 20rpx;
	// 			// image{width: 35rpx; height: 35rpx;margin: auto;}
	// 		}
	// 	}
	// 	.upload-img-item{
	// 		width: 210rpx;
	// 		height: 210rpx;
	// 		background: #F5F6FA;
	// 		position: relative;
	// 		margin-bottom: 20rpx;
	// 		display: flex; justify-content: center; align-items: center;
	// 		image{width: 60rpx;height: 60rpx;}
	// 	}
	// }
	.customTab{
		display: flex;
		align-items: center;
		text{
			height: 80rpx;
			margin: 0 30rpx 0 0;
			padding: 0 50rpx;
			line-height: 80rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			color: #333333;
			text-align: center;
		}
		.active{
			color: white;
			background: #000;
		}
	}
	.upload-img-box{
		width: 100%;
		.upload-img-box-item{
			position: relative;
			line-height: 0;
			image{width: 210rpx;height: 210rpx;margin: 0 20rpx 20rpx 0;}
			.del{
				position: absolute;
				top: 0;
				right: 20rpx;
				image{width: 35rpx; height: 35rpx;margin: auto;}
			}
		}
		.upload-img-item{
			width: 210rpx;
			height: 210rpx;
			background: #F5F6FA;
			margin-bottom: 20rpx;
			display: flex; justify-content: center; align-items: center;
			image{width: 60rpx;height: 60rpx;}
		}
	}
	.content{
		width: 100%;
		height: calc(100vh - 150rpx);
		overflow: hidden;overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		.from-info-box{
			padding: 30rpx;
			.from-item-box{
				padding: 20rpx 0;
				.title-box{
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}
				.input-box{
					position: relative;
					width: 100%;
					input{
						font-size: 30rpx;
						font-weight: 400;
						padding: 30rpx;padding-right: 80rpx;
						border: 1rpx solid #000;
						border-radius: 20rpx;
					}
					textarea{
						width: 90%;
						font-size: 30rpx;
						font-weight: 400;
						padding: 30rpx;
						border: 1rpx solid #000;
						border-radius: 20rpx;
					}
					.scanImg{
						position: absolute;
						right: 30rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 30rpx;
						height: 30rpx;
						z-index: 100;
					}
				}
			}
		}
		.bottom-plate-box{
			position: fixed;bottom: 0;
			z-index: 100;
			width: 100%;
			padding: 30rpx 20rpx;
			padding-bottom: 50rpx;
			background: #fff;
		.bottom-but-box{
			width: 100%;
			padding: 25rpx 0;
			background: #000;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 50rpx;
			}
		}
	}
</style>